import * as React from "react";
import {Button} from 'antd';
const Tables = ({database, activeTable, onClick}) => {
  const datas = database ? database.get('tables') : [];
  return (
    <div className="web-datasource-table web-box flex-direction-column">
      <div className="web-datasource-table-top">
        <Button type="primary">刷新表信息</Button>
      </div>
      <div className="web-datasource-table-body flex-grow-1">
        {
          datas && datas.map(item => {
            const classnames = ["web-datasource-table-item"];
            if (activeTable == item) {
              classnames.push("web-datasource-table-item-active");
            }
            return (
              <div key={item}
                   onClick={() => onClick(item)}
                   className={classnames.join(' ')}>
                {item}
              </div>
            );
          })
        }
      </div>
    </div>
  );
}

export default Tables;
